<template>
	<view>
		<navbar :title="$t('management.addressmanage')" :background="$utypeprimary" :titleColor="$utitlecolor" :backColor="$utitlecolor">
		</navbar>
		<view>
		<view v-if="list.length">
			<view class="box1" v-for="(item,index) in list" :key= "index" >
				<view class="top">
					<view class="name">
						{{item.name}}
					</view>
					<view class="phone">
						{{item.mobile}}
					</view>
				</view>
				<view class="mid">
					<image src="../../static/image/address/address.png"
					style="width: 41rpx; height: 49rpx;" mode=""></image>
					<view class="mid-address">
					{{item.province}}, {{item.city}},{{item.county}},{{item.village}},{{item.address}}
					</view>
				</view>
				<view class="bottom">
					<view style="width: 32rpx;height:32rpx; margin-right:20rpx;" v-if="item.is_default">
						<image src="@/static/image/address/checked_icon.png" style="width: 32rpx;height:32rpx;" mode="" />
					</view>
					<view style="width: 32rpx;height:32rpx; margin-right:20rpx;border: 2rpx solid #C8C8C8;background: #ECECEC;" @click="setDefault(item.id)" v-else>
					</view>
					<view class="default">
						{{$t("management.default")}}
					</view>
					<image src="../../static/image/address/edit.png"
					style="width: 29rpx; height: 29rpx;margin-left: 122rpx;" mode=""></image>
					<view class="edit" @click="edit(item)">
						{{$t("management.edit")}}	
					</view>
					<image src="../../static/image/address/delete.png"
					style="width: 29rpx; height: 29rpx;margin-left: 60rpx;" mode="" @click="delete1(index,item.id)"></image>
					<view class="edit">
						{{$t("management.delete")}}	
					</view>
				</view>
			</view>
		</view>
		<mnodata v-else></mnodata>
		</view>
		
		<view style="width:670rpx;height:90rpx;position:fixed;bottom: 30rpx;left:40rpx;">
			<overbtn :btnText="$t('management.add')" @btnAction="navTo('/pages/Addaddress/Addaddress')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
		</view>
	</view>
</template>

<script>
	import {
		getaddress,
		deladdress,
		setdefault
	}from '../../api/address.js'
	export default {
		data() {
			return {
				list:[
					
				]
			}
		},
		methods: {
			async delete1(index,id) {
				uni.showLoading();
				await deladdress({
					id :id
				})
				this.load();
				uni.hideLoading();
			},
			checkboxChange(e){
				if(e.value){
					for(let i=0; i<this.list.length; i++){
						if(e.name != this.list[i].name){
							this.list[i].checked = false
						}
					}
				}
			},
			async setDefault(val) {
				uni.showLoading({
				});
				await setdefault({
					id : val,
					is_default : 1
				})
				uni.hideLoading();
				this.load();
			},
			navTo(val) {
				uni.navigateTo({
					url:val
				})
			},
			edit(item){
				uni.navigateTo({
					url:'../editaddress/editaddress?addinfo=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			async load(){
				let result = await getaddress()
				console.log(result)
				for(let i=0; i<result.length; i++){
					result[i].checked = false
				}
				this.list = result
				console.log(this.list)
			}
			
		},
		onShow() {
			 this.load();
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFFFF;
	}
	
	.box1{
		padding: 40rpx;
	}	
	.top{
		display: flex;
		font-family: Rubik;
		justify-content: space-between;
		.name{
			font-size: 34rpx;
			font-weight: 500;
			color: #2B3039;
		}
		.phone{
			font-size: 30rpx;
			font-weight: 400;
			color: #65676B;	
		}
	}
	
	.mid{
		display: flex;
		justify-content: space-between;
		margin-top: 39rpx;
		margin-bottom: 42rpx;
		.mid-address{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			margin-left: 20rpx;
			width: 609rpx;
			height: 63rpx;
		}
	}
	.bottom{
		display: flex;
		align-items: center;
		height: 34rpx;
		.default{
			margin-left: -6rpx;
		}
			
		.edit{
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #AAAAAA;
			margin-left: 13rpx;
		}
	}
	
</style>
